<template>
  <h3>计算属性</h3>
  <ul>
    <li v-for="item in oddArr">{{ item }}</li>
  </ul>

  <hr />

  <p>num: {{ num }}</p>
  <p>doubleNum: {{ doubleNum }}</p>
  <button @click="fn">num++</button>
</template>

<script setup>
// 需要结构computed方法
import { computed, ref } from "vue";
const arr = ref([1, 2, 3, 4, 5, 6, 7]);

// 里面传入一个函数
// 并且可以得到一个返回值，返回值就是我们要的计算属性
const oddArr = computed(() => {
  return arr.value.filter((item) => item % 2);
});

const num = ref(1);
const doubleNum = computed(() => num.value * 2);
const fn = () => {
  num.value++;
};
</script>
